<!--
 * @Author: mayating mayating@xinchan.com.cn
 * @Date: 2024-06-26 10:45:48
 * @LastEditors: mayating mayating@xinchan.com.cn
 * @LastEditTime: 2024-06-26 19:04:07
 * @FilePath: /wuniubi/src/App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!--========== HEADER ==========-->
  <header class="l-header" id="header">
    <nav class="nav bd-container">
      <router-link to="" class="nav__logo animated backInLeft">{{ $store.state.app.detail.companyname || '西里 Makeup.' }}</router-link>
      <div class="nav__menu" id="nav-menu" :class="flag ? 'show-menu' : ''">
        <ul class="nav__list">
          <li
            class="nav__item"
            v-for="(item, index) in list"
            :key="index"
            @click="changeFlag"
          >
            <router-link
              :to="item.link"
              class="nav__link"
              :class="index === active ? 'active-link' : ''"
              >{{ item.name }}</router-link
            >
          </li>
          <li>
            <i
              class="bx bx-toggle-left change-theme"
              id="theme-button"
              @click="changeFlags"
            ></i>
          </li>
        </ul>
      </div>
      <div class="nav__toggle" id="nav-toggle">
        <i class="bx bx-grid-alt" @click="changeFlag"></i>
      </div>
    </nav>
  </header>
</template>

<script>
export default {
  name: "Header-index",
  data() {
    return {
      flag: false,
      list: [
        { name: "首页", link: "#home", to: "" },
        { name: "婚礼日记", link: "#share", to: "" },
        { name: "赠送饰品", link: "#decoration", to: "" },
        { name: "美妆品牌", link: "#accessory", to: "" },
      ],
      active: "0",
    };
  },
  methods: {
    changeFlag() {
      this.flag = !this.flag;
    },
    changeFlags() {
      this.changeFlag();
      this.$emit("changeFlag");
    },
  },
};
</script>
